<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title></title>
<style>
*{
list-style: none;
margin:0;
padding:0;
}
#div1{
	width: 200px;
	height:380px;
	border: 1px solid black;
	background:pink;
}
ul{
	display:block;
	margin-top:12px;
}
li{
	width: 50px;
	height: 50px;
	background: #666;
	margin:0px 0px 12px 12px;
	color:#fff;
	float:left;
	text-align: center;
}
.text{
	clear:left;
	width:174px;
	height:min-height;
	border:1px solid #fff;
	text-align: center;
	margin:12px;
}
.active{
	background:#fff;
    color:black;
}
</style>
<script>
window.onload=function(){
	var arr=[
	 '家人永远健康家人永远健康家人永远健康家人永远健康家人永远健康',
    '回家好开心！',
    '周末过好快！',
    '小珍好漂亮',
    '闪闪永远开心',
    '秋果么么哒',
    '李萍生个大胖小子',
    '梦涵是个开心果',
    '我要加油',
    '永远进步',
    '坚持做自己',
    '开心快乐'
	];
	var adiv=document.getElementById('div1');
	var oli=adiv.getElementsByTagName('li');
	var odiv=adiv.getElementsByTagName('div')[0];
	for(var i=0;i<oli.length;i++)
	{
		oli[i].index=i;
		oli[i].onmouseover=function()
        { 
         for(var i=0;i<oli.length;i++)
          {
       	   oli[i].className='';
          }
       this.className='active';
        odiv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
        };
       
	}
};
</script>
</head>
<body>
<div id="div1">
  <ul>
    <li class="active"><h2>1</h2><p>JAN</p></li>
    <li><h2>2</h2><p>FER</p></li>
    <li><h2>3</h2><p>MAR</p></li>
    <li><h2>4</h2><p>APR</p></li>
    <li><h2>5</h2><p>MAY</p></li>
    <li><h2>6</h2><p>JUN</p></li>
    <li><h2>7</h2><p>JUL</p></li>
    <li><h2>8</h2><p>AUG</p></li>
    <li><h2>9</h2><p>SEP</p></li>
    <li><h2>10</h2><p>OCT</p></li>
    <li><h2>11</h2><p>NOV</p></li>
    <li><h2>12</h2><p>DEC</p></li>
  </ul>
  <div class="text">
  <h2>1月活动</h2>
  <p>家人永远健康家人永远健康家人永远健康家人永远健康家人永远健康</p>
  </div>
</div>
</body>
</html>
